<template>
  <vxe-column v-if="mybtns.length > 0" :label="$t('操作')" :fixed="isFixed ? 'right' : undefined" :width="width"
    :resizable="false">
    <template slot-scope="scope">
      <template v-if="mybtns.length <= btnNum">
        <button v-for="item in myfilterBtns(scope.row, mybtns)" :key="item.prop" :style="{
            color:
              item.prop.toLowerCase().indexOf('delete') > -1 ? '#f56c6c' : '',
          }" type="button" @click.stop="handleClick(scope.$rowIndex, scope.row, item.prop)" :disabled="item.disabled"
          :class="[
            'el-button',
            'el-button--text',
            'el-button--mini',
            { 'is-disabled': item.disabled },
          ]">
          <span>{{ $t(item.label) }}</span>
        </button>
      </template>
      <template v-else>
        <button v-for="item in myfilterBtns(scope.row, btns1)" :key="item.prop" :style="{
            color:
              item.prop.toLowerCase().indexOf('delete') > -1 ? '#f56c6c' : '',
          }" type="button" @click.stop="handleClick(scope.$rowIndex, scope.row, item.prop,scope)"
          :disabled="item.disabled" :class="[
            'el-button',
            'el-button--text',
            'el-button--mini',
            { 'is-disabled': item.disabled },
          ]">
          <span>{{ $t(item.label) }}</span>
        </button>

        <el-dropdown :size="size" style="margin-left: 8px" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :disabled="item.disabled" :class="{
                delete: item.prop.toLowerCase().indexOf('delete') > -1,
              }" :command="{
                rowIndex: scope.$rowIndex,
                row: scope.row,
                type: item.prop,
              }" v-for="item in myfilterBtns(scope.row, btns2)" :key="item.prop" :divided="item.divided">
              {{ $t(item.label) }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </template>
  </vxe-column>
</template>

<script>
export default {
  name: "l-table-btns",
  props: {
    size: {
      type: String,
      default: "mini",
    },
    btns: {
      type: Array,
      default: () => [],
    },
    filterBtns: {
      type: Function,
    },
    isFixed: {
      type: Boolean,
      default: true,
    },
    isAuth: {
      type: Boolean,
      default: true,
    },
    btnNum: {
      type: Number,
      default: 3
    },
    pageModuleCode: String
  },
  watch: {},
  data() {
    return {};
  },
  computed: {
    mybtns() {
      if (!this.isAuth || !this.lr_pageAuthInfo.isAuth) {
        return this.btns;
      } else if (
        this.lr_pageAuthInfo.data &&
        this.lr_pageAuthInfo.data.buttons
      ) {
        return this.btns.filter(
          (t) => this.lr_pageAuthInfo.data.buttons.indexOf(t.prop) > -1
        );
      }
      return [];
    },

    btns1() {
      let btns = [];
      for (let i = 0; i < this.btnNum - 1; i++) {
        btns.push(this.mybtns[i]);
      }
      return btns;
    },
    btns2() {
      let btns = [];
      for (let i = this.btnNum - 1, len = this.mybtns.length; i < len; i++) {
        btns.push(this.mybtns[i]);
      }
      return btns;
    },
    width() {
      let width = 24;
      let len = this.mybtns.length;

      this.mybtns.forEach((item, index) => {
        if (index < this.btnNum - 1) {
          width += item.width || 32;
        }
      });

      if (len > this.btnNum) {
        width += 20;
      }
      else if (len == this.btnNum) {
        width += this.mybtns[this.btnNum - 1].width || 40;
      }

      return width;
    },
    moduleCode() {
      if (this.pageModuleCode) {
        return this.pageModuleCode
      }
      else {
        return this.$parent.$parent.$parent.$parent.$parent.moduleCode
      }
    },
  },
  methods: {
    myfilterBtns(row, btns) {
      if (this.filterBtns) {
        return this.filterBtns(row, this.$deepClone(btns));
      } else {
        return btns;
      }
    },
    handleCommand(command) {
      this.$emit("click", command);
    },
    handleClick(rowIndex, row, type) {
      this.$emit("click", { rowIndex: rowIndex, row: row, type: type });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>